<!-- #layout name=blank-->
<style>
  .setting-list p.form-control-static {
    word-wrap: break-word;
    min-height: 0;
  }

  .setting-list {
    padding: 0;
    list-style: none;
  }

  .setting-list li {
    padding: 15px 0;
    border-bottom: 1px solid #eeeeee;
  }

  .setting-list li:last-child {
    border-bottom: 0;
  }
</style>
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Settings</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>

  <ul class="setting-list clearfix" v-if="!loading">
    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Display name</label>
      </div>
      <div class="col-md-9">
        <input type="text" v-model="model.displayName" class="form-control input-large" />
      </div>
    </li>
    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Site type</label>
      </div>
      <div class="col-md-9">
        <select class="form-control input-large" v-model="model.siteType">
          <option v-for="option in siteTypes" :value="option.key">
            {{ option.value }}
          </option>
        </select>
      </div>
    </li>
    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Import/Export site</label>
        <p class="form-control-static"></p>
      </div>
      <div class="col-md-9">
        <button @click="onShowUploadModal" class="btn btn-default">
          <i class="fa fa-download"></i>
          <span>{{ Kooboo.text.tooltip.uploadNewContent }}</span>
        </button>
        <button @click="onShowExportModal" class="btn btn-default">
          <i class="fa fa-upload"></i>
          <span>{{ Kooboo.text.tooltip.exportSite }}</span>
        </button>
      </div>
    </li>
    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Enable Visitor Log</label>
        <p class="form-control-static"></p>
      </div>
      <div class="col-md-9">
        <kb-switch v-model="model.enableVisitorLog"></kb-switch>
      </div>
    </li>
    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Enable Sql Log</label>
        <p class="form-control-static"></p>
      </div>
      <div class="col-md-9">
        <kb-switch v-model="model.enableSqlLog"></kb-switch>
      </div>
    </li>
    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Enable Constraint Fix On Save</label>
        <p class="form-control-static"></p>
      </div>
      <div class="col-md-9">
        <kb-switch v-model="model.enableConstraintFixOnSave"></kb-switch>
      </div>
    </li>
    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Enable Front Events</label>
        <p class="form-control-static"></p>
      </div>
      <div class="col-md-9">
        <kb-switch v-model="model.enableFrontEvents"></kb-switch>
      </div>
    </li>

    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Enable Js Css Compression</label>
        <p class="form-control-static"></p>
      </div>
      <div class="col-md-9">
        <kb-switch v-model="model.enableJsCssCompress"></kb-switch>
      </div>
    </li>


    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Enable Js CSS Browser Cache</label>
      </div>
      <div class="col-md-9">
        <div class="form-group">
          <kb-switch v-model="model.enableJsCssBrowerCache"></kb-switch>
        </div>
      </div>
    </li>

    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Enable Video Browser Cache</label>
      </div>
      <div class="col-md-9">
        <div class="form-group">
          <kb-switch v-model="model.enableVideoBrowserCache"></kb-switch>
        </div>
      </div>
    </li>


    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Enable image Browser Cache</label>
      </div>
      <div class="col-md-9">
        <div class="form-group">
          <kb-switch v-model="model.enableImageBrowserCache"></kb-switch>
        </div>
        <div v-kb-collapsein="model.enableImageBrowserCache">
          <div class="form-group">
            <p class="form-control-static">number of expiration days, using 0 or -1 to use version control</p>
            <input type="text" id="cache_days" class="form-control input-inline input-large"
              v-model="model.imageCacheDays" />

          </div>
        </div>
      </div>
    </li>

    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Enable Lighthouse optimization</label>
      </div>
      <div class="col-md-9">
        <div class="form-group">
          <kb-switch v-model="model.enableLighthouseOptimization"></kb-switch>
          <a v-if="model.enableLighthouseOptimization" href="javascript:;" class="btn btn-default navbar-btn"
            style="margin-left: 5px;" v-kb-tooltip="Kooboo.text.site.setting.configuration"
            @click="onShowLighthouseModal"><i class="fa fa-gear"></i></a>
        </div>
      </div>
    </li>


    <li class="item clearfix" k-if="kooboosetting.IsLocal=true">
      <div class="col-md-3">
        <label class="control-label">Enable Disk Sync</label>
        <p class="form-control-static"></p>
      </div>
      <div class="col-md-9">
        <div class="form-group">
          <kb-switch v-model="model.enableDiskSync"></kb-switch>
        </div>
        <div v-kb-collapsein="model.enableDiskSync">
          <div class="form-group">
            <input type="text" id="folder-path" class="form-control input-inline input-large"
              v-model="model.diskSyncFolder" />
            <button type="button" id="copy_sync_path" data-clipboard-target="#folder-path"
              class="btn btn-link">Copy</button>
          </div>
        </div>
      </div>
    </li>
    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Enable Multilingual</label>
        <p class="form-control-static"></p>
      </div>
      <div class="col-md-9">
        <kb-switch v-model="model.enableMultilingual"></kb-switch>
        <div class="margin-top-20" v-kb-collapsein="model.enableMultilingual">
          <div class="form-group">
            <label class="control-label">Multilingual</label>
            <div class="file-list">
              <ul class="form-control input-large" style="display: inline-table;">
                <li v-for="lang in langs">
                  {{ lang.value }}
                  <a href="javascript:;" @click="removeLang(lang)" v-kb-tooltip="Kooboo.text.common.remove">
                    <i class="fa fa-remove"></i>
                  </a>
                </li>
              </ul>
              <a class="btn btn-default" @click="onAddLangModalShow"
                v-kb-tooltip="Kooboo.text.site.setting.configuration">
                <i class="fa fa-cog"></i>
              </a>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label">Default Language</label>
            <select v-model="model.defaultCulture" class="form-control input-large">
              <option v-for="option in langs" :value="option.key">
                {{ option.value }}
              </option>
            </select>
          </div>
        </div>
      </div>
    </li>
    <li class="item clearfix" v-kb-collapsein="model.enableMultilingual">
      <div class="col-md-3">
        <label class="control-label">Enable language path</label>
        <!-- prettier-ignore -->
        <p class="form-control-static">
          Language path is a virtual path of your website. You may create a path eg. www.kooboo.com/en, en is the
          language path.
        </p>
      </div>
      <div class="col-md-9">
        <div class="form-group">
          <kb-switch v-model="model.enableSitePath"></kb-switch>
        </div>
        <div v-kb-collapsein="model.enableSitePath">
          <div class="form-group" v-for="lang in langs">
            <label class="control-label">{{ lang.key }}</label>
            <input type="text" :name="'SitePath.' + lang.key" v-model="model.sitePath[lang.key]"
              class="form-control input-large" />
          </div>
        </div>
      </div>
    </li>
    <li class="item clearfix" v-kb-collapsein="model.enableMultilingual">
      <div class="col-md-3">
        <label class="control-label">Auto detect culture</label>
        <p class="form-control-static"></p>
      </div>
      <div class="col-md-9">
        <div class="form-group">
          <kb-switch v-model="model.autoDetectCulture"></kb-switch>
        </div>
      </div>
    </li>

    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Enable CORS</label>
        <p class="form-control-static"></p>
      </div>
      <div class="col-md-9">
        <div class="form-group">
          <kb-switch v-model="model.enableCORS"></kb-switch>
        </div>
      </div>
    </li>

    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Enable SPA</label>
        <p class="form-control-static">redirect 404 to start page</p>
      </div>
      <div class="col-md-9">
        <div class="form-group">
          <kb-switch v-model="model.enableSPA"></kb-switch>
        </div>
      </div>
    </li>


    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Force SSL</label>
        <p class="form-control-static"></p>
      </div>
      <div class="col-md-9">
        <kb-switch v-model="model.forceSSL"></kb-switch>
      </div>
    </li>


    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Base Url</label>
      </div>
      <div class="col-md-9">
        <input type="text" v-model="model.previewUrl" class="form-control input-large" />
      </div>
    </li>



    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">Custom settings</label>
        <p class="form-control-static"></p>
      </div>
      <div class="col-md-9">
        <div class="input-groups">
          <div class="input-group" v-for="(setting, index) in customSettingArray" :key="index">
            <input type="text" v-model="setting.key" class="form-control key" placeholder="Key" />
            <span class="input-group-addon">-</span>
            <input type="text" v-model="setting.value" class="form-control value" placeholder="Value" />
            <span class="input-group-btn">
              <a @click.prevent="removeCustomSetting(setting)" v-kb-tooltip:right="Kooboo.text.common.remove"
                class="btn btn-default" href="javascript:;">
                <i class="fa fa-minus"></i>
              </a>
            </span>
          </div>
          <a @click.prevent="addCustomSetting" v-kb-tooltip:right="Kooboo.text.tooltip.add" class="btn dark"
            href="javascript:;">
            <i class="fa fa-plus"></i>
          </a>
        </div>
      </div>
    </li>
    <li class="item clearfix">
      <div class="col-md-3">
        <label class="control-label">
          <button class="btn green" @click="save">Save</button>
        </label>
      </div>
    </li>
  </ul>
  <div v-kb-modal="langModalShow" class="modal fade" data-backdrop="static" data-keyboard="fasle">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button @click="onAddLangModalHide" class="close">
            <i class="fa fa-close"></i>
          </button>
          <h4 class="modal-title">Configuration</h4>
        </div>
        <div class="modal-body">
          <div class="form-horizontal">
            <div class="form-group margin-top-10">
              <div class="col-md-12 input-groups">
                <div v-for="(lang, index) in editingLangs" class="input-group"
                  :class="{'has-error' : lang.error.value || lang.error.key }">
                  <input type="text" class="form-control input-medium"
                    v-kb-typeahead="{source: culturesKey, defaultShow: true, items: 10 }" v-model="lang.key"
                    v-kb-tooltip:left.manual.error="lang.error.key" placeholder="Language code"
                    @blur="editLang($event.target, lang);validateLangModal(lang)" />
                  <span class="input-group-addon">:</span>
                  <input type="text" class="form-control input-medium" v-model="lang.value" placeholder="Language name"
                    @blur="validateLangModal(lang)" />
                  <span class="input-group-btn" v-kb-tooltip:right.manual.error="lang.error.value">
                    <a class="btn btn-default" href="javascript:;" @click="removeEditingLang(lang)"
                      v-kb-tooltip="Kooboo.text.common.remove">
                      <i class="fa fa-minus"></i>
                    </a>
                  </span>
                </div>
                <a class="btn dark" @click="addNewLang" v-kb-tooltip="Kooboo.text.tooltip.add">
                  <i class="fa fa-plus"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="onAddLangModalSave" class="btn green">Save</button>
          <button @click="onAddLangModalHide" class="btn gray">Cancel</button>
        </div>
      </div>
    </div>
  </div>
  <div k-if="false" v-kb-modal="showSiteMirrorConfigModal" class="modal fade" data-backdrop="static"
    data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" data-bind="click: hideSiteMirrorConfigModal">
            <i class="fa fa-close"></i>
          </button>
          <h4 class="modal-title">Site mirror configuration</h4>
        </div>
        <div class="modal-body">
          <div class="form-horizontal" data-bind="visible: !isSlaveSite()">
            <div class="form-group">
              <label class="col-md-3 control-label">Enable</label>
              <div class="col-md-9">
                <input type="checkbox" id="enable_cluster" />
              </div>
            </div>
            <div v-kb-collapsein="model.enableCluster">
              <div class="form-group">
                <label class="col-md-3 control-label">Root server</label>
                <div class="col-md-9">
                  <p class="form-control-static">
                    <a href="javascript:;" class="btn blue" disabled data-bind="tooltip:">
                      <i class="fa fa-dot-circle-o"></i>
                    </a>
                  </p>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">Available server</label>
                <div class="col-md-9">
                  <div class="margin-bottom-5" data-bind="foreach: _clusters, visible: _clusters().length">

                    <a href="javascript:;" class="btn"
                      data-bind="click: changeStatus, css: { 'btn-default': !$data.isSelected(), 'blue': $data.isSelected() }, attr: { disabled: $data.disabled, title: 'IP: ' + $data.ip() + ':' + $data.port() }"
                      style="margin: 0 5px 5px 0;">
                      <i class="fa"
                        data-bind="css: { 'fa-dot-circle-o': $data.isSelected(), 'fa-circle-o': !$data.isSelected() }"></i>

                      <i class="fa fa-close"
                        data-bind="click: $parent.removeCustomCluster, tooltip: Kooboo.text.common.remove, clickBubble: false"
                        style="margin-left: 5px; margin-right: 5px;"></i>

                    </a>

                  </div>
                  <a href="javascript:;" class="btn dark"
                    data-bind="click: addCustomServer, tooltip: Kooboo.text.common.add" style="margin-top: -5px;">
                    <i class="fa fa-plus"></i>
                  </a>
                </div>
              </div>
              <div k-if="kooboosetting.IsLocal = false">
                <hr />
                <div class="form-group">
                  <label class="col-md-3 control-label">Location redirect</label>
                  <div class="col-md-9">
                    <input type="checkbox" id="enable_location_redirect" />
                  </div>
                </div>
                <div v-kb-collapsein="enableLocationRedirect">
                  <div class="form-group">
                    <p class="col-md-9 col-md-offset-3">Site Cluster enable your website to have mirrors on different
                      data centers</p>
                  </div>

                  <div class="form-group" v-kb-collapsein="$data.isSelected">
                    <label class="col-md-3 control-label" data-bind="text: $data.displayName"></label>
                    <div class="col-md-9">
                      <div class="form-inline">
                        <div data-bind="error: $data.subDomain" style="display: inline-block;">
                          <input type="text" class="form-control" data-bind="textInput: $data.subDomain" />
                          <select class="form-control"
                            data-bind="options: $parent.domains, value: $data.rootDomain, optionsValue: 'value', optionsText: 'name'"></select>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
          <div class="form-horizontal" data-bind="visible: isSlaveSite">
            <div class="form-group">
              <div class="col-md-10 col-md-offset-1">
                <p class="form-control-static">This is a Slave site, editing is not allowed</p>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <a href="javascript:;" class="btn green" data-bind="click: saveSiteMirrorConfigModal">Save</a>
          <a href="javascript:;" class="btn gray" data-bind="click: hideSiteMirrorConfigModal">Cancel</a>
        </div>
      </div>
    </div>
  </div>
  <div v-kb-modal="uploadModal" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button @click="onHideUploadModal" class="close">
            <i class="fa fa-close"></i>
          </button>
          <h4 class="modal-title">Import</h4>
        </div>
        <div class="modal-body">
          <div class="alert alert-info">Import kooboo package or HTML files</div>
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-md-3 control-label">File</label>
              <div class="col-md-9">
                <a class="btn btn-default btn-file">
                  <input type="file" v-kb-upload="{
                                    allowMultiple: false,
                                    acceptTypes: [
                                        'application/zip',
                                        'application/x-zip',
                                        'application/octet-stream',
                                        'application/x-zip-compressed'
                                    ],
                                    acceptSuffix:['zip'],
                                    callback: uploadFile
                                }" />
                  <span>Select file</span>
                </a>
                <span>Support files: *.zip</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="onHideUploadModal" class="btn btn-default">Close</button>
        </div>
      </div>
    </div>
  </div>
  <kb-export-modal :is-show.sync="showExportModal"></kb-export-modal>
  <div k-if="false" v-kb-modal="showCustomServerModal" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" data-bind="click: onHideCustomServerModal">
            <i class="fa fa-close"></i>
          </button>
          <h4 class="modal-title">Custom server</h4>
        </div>
        <div class="modal-body">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-md-3 control-label">IP</label>
              <div class="col-md-9">
                <input type="text" class="form-control" data-bind="value: customServerIP, error: customServerIP" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-3 control-label">Port</label>
              <div class="col-md-9">
                <input type="number" class="form-control"
                  data-bind="value: customServerPort, error: customServerPort" />
              </div>
            </div>
            <div class="form-group">
              <label for="" class="col-md-3 control-label">Name</label>
              <div class="col-md-9">
                <input type="text" class="form-control" data-bind="value: customServerName, error: customServerName" />
              </div>
            </div>
            <div class="form-group">
              <label for="" class="col-md-3 control-label">Display name</label>
              <div class="col-md-9">
                <input type="text" class="form-control"
                  data-bind="value: customServerDisplayName, error: customServerDisplayName" />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn green" data-bind="click: onSaveCustomServer">Save</button>
          <button class="btn gray" data-bind="click: onHideCustomServerModal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
  <div v-kb-modal="showLighthouseModal" class="modal fade" data-backdrop="static" data-keyboard="fasle">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button @click="showLighthouseModal=false" class="close">
            <i class="fa fa-close"></i>
          </button>
          <h4 class="modal-title">Configuration</h4>
        </div>
        <div class="modal-body">
          <ul class="setting-list clearfix" v-if="!loading">
            <li class="item clearfix" v-for="(item,index) in lighthouseItemsBinding">
              <div class="col-md-9">
                <label class="control-label">{{item.name}}</label>
                <!-- prettier-ignore -->
                <p class="form-control-static">
                  {{item.description}}
                </p>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <kb-switch v-model="item.enable"></kb-switch>
                </div>
              </div>
              <div class="col-md-9" v-kb-collapsein="item.enable" v-if="item.setting">
                <div class="form-group" v-for="setting in item.setting">
                  <label class="control-label">{{ setting.displayName }}</label>
                  <div v-if="setting.controlType=='Switch'">
                    <kb-switch v-model="setting.value"></kb-switch>
                  </div>
                  <input v-else-if="setting.controlType=='Number'" type="number" class="form-control input-large"
                    v-model.number="setting.value" />
                  <input v-else class="form-control input-large" v-model="setting.value" />
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="modal-footer">
          <button @click="onLighthouseSave" class="btn green">Save</button>
          <button @click="showLighthouseModal=false" class="btn gray">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  (function () {
    Kooboo.loadJS([
      "/_Admin/Scripts/lib/clipboard.min.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/SPA.js",
      "/_Admin/Scripts/lib/bootstrap3-typeahead.min.js",
      "/_Admin/Scripts/components/kbTypeahead.js",
      "/_Admin/Scripts/components/kbExportModal.js",
      "/_Admin/Scripts/lib/bootstrap-switch/bootstrap-switch.min.js",
      "/_Admin/Scripts/components/kbSwitch.js"
    ]);
    Kooboo.loadCSS([
      "/_Admin/Scripts/lib/bootstrap-switch/bootstrap-switch.min.css"
    ]);
  })();
</script>
<script src="/_Admin/View/System/Settings.js"></script>